<template>
  <div id="viewQuestionView" class="question-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">
        <CodeOutlined class="title-icon" />
        编程挑战
      </h1>
      <div class="decorative-line"></div>
    </div>

    <a-row :gutter="[32, 32]" class="content-row">
      <!-- 左侧题目面板 -->
      <a-col :md="12" :xs="24">
        <div class="question-panel">
          <a-tabs
            v-model:activeKey="activeTab"
            type="card"
            class="custom-tabs"
            :tab-bar-style="{ marginBottom: '24px' }"
          >
            <a-tab-pane key="question" tab="题目">
              <template #tab>
                <FileTextOutlined />
                题目
              </template>

              <a-card v-if="question" :bordered="false" class="question-card">
                <template #title>
                  <div class="question-title">
                    <h2 class="title-text">{{ question.title }}</h2>
                    <a-space wrap class="tag-container">
                      <a-tag
                        v-for="(tag, index) of question.tags"
                        :key="index"
                        :color="getTagColor(index)"
                        class="custom-tag"
                      >
                        <TagOutlined />
                        {{ tag }}
                      </a-tag>
                    </a-space>
                  </div>
                </template>

                <!-- 判题条件 -->
                <div class="judge-conditions">
                  <h3 class="section-title">
                    <SettingOutlined class="section-icon" />
                    判题条件
                  </h3>
                  <a-row :gutter="[16, 16]" class="conditions-grid">
                    <a-col :span="8">
                      <div class="condition-item time-limit">
                        <div class="condition-icon">
                          <ClockCircleOutlined />
                        </div>
                        <div class="condition-details">
                          <div class="condition-label">时间限制</div>
                          <div class="condition-value">{{ question.judgeConfig.timeLimit ?? 0 }} ms</div>
                        </div>
                      </div>
                    </a-col>

                    <a-col :span="8">
                      <div class="condition-item memory-limit">
                        <div class="condition-icon">
                          <DatabaseOutlined />
                        </div>
                        <div class="condition-details">
                          <div class="condition-label">内存限制</div>
                          <div class="condition-value">{{ question.judgeConfig.memoryLimit ?? 0 }} MB</div>
                        </div>
                      </div>
                    </a-col>

                    <a-col :span="8">
                      <div class="condition-item stack-limit">
                        <div class="condition-icon">
                        </div>
                        <div class="condition-details">
                          <div class="condition-label">堆栈限制</div>
                          <div class="condition-value">{{ question.judgeConfig.stackLimit ?? 0 }} MB</div>
                        </div>
                      </div>
                    </a-col>
                  </a-row>
                </div>

                <!-- 题目内容 -->
                <div class="content-wrapper">
                  <a-divider orientation="left">
                    <span class="divider-text">
                      <BookOutlined />
                      题目描述
                    </span>
                  </a-divider>
                  <div class="md-content">
                    <MdViewer :value="question.content || ''" />
                  </div>
                </div>
              </a-card>
            </a-tab-pane>

            <a-tab-pane key="comment" tab="评论" disabled>
              <template #tab>
                <MessageOutlined />
                评论
              </template>
              <a-empty description="评论功能即将上线" class="empty-state">
                <template #image>
                  <MessageOutlined class="empty-icon" />
                </template>
              </a-empty>
            </a-tab-pane>

            <a-tab-pane key="answer" tab="答案">
              <template #tab>
                <EyeInvisibleOutlined />
                答案
              </template>
              <a-empty description="暂时无法查看答案" class="empty-state">
                <template #image>
                  <LockOutlined class="empty-icon" />
                </template>
              </a-empty>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-col>

      <!-- 右侧代码编辑面板 -->
      <a-col :md="12" :xs="24">
        <div class="code-panel">
          <!-- 代码编辑器头部 -->
          <div class="code-header">
            <h3 class="section-title">
              <CodeOutlined class="section-icon" />
              代码编辑器
            </h3>
            <a-form :model="form" layout="inline" class="language-selector">

              <a-form-item label=判题方式>
                <a-select
                  v-model:value="form.judgmentMethod"
                  :options="judgmentMethodOptions"
                  placeholder="选择编程语言"
                  class="language-select"
                  :suffixIcon="h(CaretDownOutlined)"
                >
                  <template #option="{ label, value }">
                    <div class="language-option">
                      <span class="language-dot" :class="`language-${value}`"></span>
                      {{ label }}
                    </div>
                  </template>
                </a-select>
              </a-form-item>

              <a-form-item label="编程语言">
                <a-select
                  v-model:value="form.language"
                  :options="languageOptions"
                  placeholder="选择编程语言"
                  class="language-select"
                  :suffixIcon="h(CaretDownOutlined)"
                >
                  <template #option="{ label, value }">
                    <div class="language-option">
                      <span class="language-dot" :class="`language-${value}`"></span>
                      {{ label }}
                    </div>
                  </template>
                </a-select>
              </a-form-item>
            </a-form>
          </div>

          <!-- 代码编辑器 -->
          <div class="editor-container">
<!--            <div class="editor-toolbar">-->
<!--              <a-space>-->
<!--                <a-tooltip title="全屏编辑">-->
<!--                  <a-button type="text" size="small">-->
<!--                    <FullscreenOutlined />-->
<!--                  </a-button>-->
<!--                </a-tooltip>-->
<!--                <a-tooltip title="重置代码">-->
<!--                  <a-button type="text" size="small">-->
<!--                    <ReloadOutlined />-->
<!--                  </a-button>-->
<!--                </a-tooltip>-->
<!--                <a-tooltip title="格式化代码">-->
<!--                  <a-button type="text" size="small">-->
<!--                    <FormatPainterOutlined />-->
<!--                  </a-button>-->
<!--                </a-tooltip>-->
<!--              </a-space>-->
<!--            </div>-->
            <CodeEditor
              :value="form.code as string"
              :language="form.language"
              :handle-change="changeCode"
              class="code-editor"
            />
          </div>

          <!-- 提交区域 -->
          <div class="submit-container">
            <a-space size="large">
<!--              <a-button size="large" class="test-button">-->
<!--                <PlayCircleOutlined />-->
<!--                运行测试-->
<!--              </a-button>-->
              <a-button
                type="primary"
                size="large"
                class="submit-button"
                :loading="submitting"
                @click="doSubmit"
              >
                <SendOutlined />
                提交代码
              </a-button>
            </a-space>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, h, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  CodeOutlined,
  FileTextOutlined,
  MessageOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  TagOutlined,
  SettingOutlined,
  ClockCircleOutlined,
  DatabaseOutlined,

  BookOutlined,
  CaretDownOutlined,
  FullscreenOutlined,
  ReloadOutlined,
  FormatPainterOutlined,
  PlayCircleOutlined,
  SendOutlined
} from '@ant-design/icons-vue'

import CodeEditor from '@/components/CodeEditor.vue'
import MdViewer from '@/components/MdViewer.vue'

import { doQuestionSubmitUsingPost, getQuestionVoByIdUsingGet } from '@/api/questionController.ts'

// 类型定义
interface QuestionSubmitAddRequest {
  language: string
  code: string
  questionId?: string
  judgmentMethod?: string
}

interface QuestionVO {
  id: string
  title: string
  content: string
  tags: string[]
  judgeConfig: {
    timeLimit: number
    memoryLimit: number
    stackLimit: number
  }
}

interface Props {
  id: string
}

// Props定义
const props = withDefaults(defineProps<Props>(), {
  id: () => ""
})

// 响应式数据
const activeTab = ref('question')
const submitting = ref(false)
const question = ref<QuestionVO>()

const languageOptions = ref([
  { label: 'Java', value: 'java' },
  { label: 'c++', value: 'c++' },
  { label: 'golang', value: 'golang' },
])

const judgmentMethodOptions = ref([
  { label: 'AI判题', value: 'ai' },
  { label: '本地沙箱判题', value: 'localSandbox' },
  { label: 'Docker沙箱判题', value: 'dockerSandbox' },
])

const form = ref<QuestionSubmitAddRequest>({
  language: "java",
  code: "",
  judgmentMethod: "ai"
})

// 方法定义
const getTagColor = (index: number) => {
  const colors = ['blue', 'green', 'orange', 'red', 'purple', 'cyan']
  return colors[index % colors.length]
}

const loadData = async () => {
  try {
    const res = await getQuestionVoByIdUsingGet({ id: props.id })
    if (res.data.data) {
      question.value = res.data.data
    } else {
      message.error("加载失败，" + res.data.message)
    }
  } catch (error) {
    message.error("网络请求失败")
  }
}

const doSubmit = async () => {
  if (!question.value?.id) {
    message.warning("题目信息加载中，请稍后再试")
    return
  }

  if (!form.value.code.trim()) {
    message.warning("请输入代码后再提交")
    return
  }

  submitting.value = true
  try {

    const res = await doQuestionSubmitUsingPost({
      ...form.value,
      questionId: question.value.id,
    })

    if (res.data.data) {
      message.success("代码提交成功！")
    } else {
      message.error("提交失败：" + res.data.message)
    }
  } catch (error) {
    message.error("网络请求失败，请重试")
  } finally {
    submitting.value = false
    console.log(form.value);
  }
}

const changeCode = (value: string) => {
  form.value.code = value
}

// 生命周期
onMounted(() => {
  loadData()
})
</script>

<style scoped>
/* 整体容器 */
#viewQuestionView {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.question-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.question-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

/* 页面头部 */
.page-header {
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 36px;
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.decorative-line {
  height: 4px;
  width: 120px;
  background: linear-gradient(90deg, #ffd700, #ffed4e);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

/* 内容区域 */
.content-row {
  position: relative;
  z-index: 1;
}

/* 题目面板 */
.question-panel {
  height: 100%;
}

.custom-tabs :deep(.ant-tabs-nav) {
  margin-bottom: 0;
}

.custom-tabs :deep(.ant-tabs-tab) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 12px 12px 0 0;
  margin-right: 8px;
  transition: all 0.3s ease;
}

.custom-tabs :deep(.ant-tabs-tab:hover) {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.custom-tabs :deep(.ant-tabs-tab-active) {
  background: white;
  color: #1890ff;
  border-bottom-color: white;
}

.custom-tabs :deep(.ant-tabs-content-holder) {
  background: white;
  border-radius: 0 12px 12px 12px;
  padding: 0;
}

/* 题目卡片 */
.question-card {
  border-radius: 0 12px 12px 12px;
  box-shadow: none;
  border: none;
}

.question-title {
  padding: 24px 24px 16px;
}

.title-text {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.tag-container {
  margin-top: 12px;
}

.custom-tag {
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 判题条件 */
.judge-conditions {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-radius: 12px;
  padding: 24px;
  margin: 24px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-icon {
  color: #1890ff;
}

.conditions-grid {
  margin: 0;
}

.condition-item {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
}

.condition-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.time-limit .condition-icon {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.memory-limit .condition-icon {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.stack-limit .condition-icon {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.condition-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.condition-details {
  flex: 1;
}

.condition-label {
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 4px;
}

.condition-value {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

/* 内容区域 */
.content-wrapper {
  padding: 0 24px 24px;
}

.divider-text {
  color: #1890ff;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.md-content {
  line-height: 1.8;
  color: #4a4a4a;
}

/* 空状态 */
.empty-state {
  padding: 60px 0;
}

.empty-icon {
  font-size: 64px;
  color: #d9d9d9;
}

/* 代码面板 */
.code-panel {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.language-selector {
  margin: 0;
}

.language-select {
  width: 180px;
}

.language-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}



/* 编辑器容器 */
.editor-container {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  margin-bottom: 20px;
}

.editor-toolbar {
  background: #fafafa;
  padding: 8px 16px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: flex-end;
}

.code-editor {
  height: 400px;
  min-height: 400px;
}

/* 提交区域 */
.submit-container {
  display: flex;
  justify-content: flex-end;
}

.test-button {
  border-color: #52c41a;
  color: #52c41a;
}

.test-button:hover {
  border-color: #73d13d;
  color: #73d13d;
}

.submit-button {
  background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.submit-button:hover {
  background: linear-gradient(135deg, #40a9ff 0%, #9254de 100%);
  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .question-container {
    padding: 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .code-header {
    flex-direction: column;
    align-items: stretch;
  }

  .language-select {
    width: 100%;
  }

  .submit-container {
    justify-content: stretch;
  }

  .submit-container :deep(.ant-space) {
    width: 100%;
    justify-content: space-between;
  }

  .conditions-grid :deep(.ant-col) {
    margin-bottom: 12px;
  }
}

/* 动画效果 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.question-card,
.code-panel {
  animation: slideInUp 0.6s ease-out;
}

.condition-item {
  animation: slideInUp 0.6s ease-out;
}

.condition-item:nth-child(1) { animation-delay: 0.1s; }
.condition-item:nth-child(2) { animation-delay: 0.2s; }
.condition-item:nth-child(3) { animation-delay: 0.3s; }
</style>
